/* This CSS Sheet pertains only to the Switch Button */

.options-group{

    display: flex;
    flex-direction: column;
    align-items: center;
    
    border-radius: 12px;
    border: solid black 2px;
    padding: 4em;
    
    background-color: gold;
}

.options{

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
    margin-top: 1em;

}

.caption-directions{
    
    position: relative;
    top: -.1em;
    /* left: 50%;   */
    /* transform: translate(-50%, -50%); */

    font-family: "Candy";
    font-size: clamp(1.0rem, 4vw, 1.5rem);

}

/* Everything below pertains to the Switch */
.switch-group{
/* #guide-notifications-option{ */

    /* display: flex; */
    /* visibility: hidden; */
   

    /* Variables: Scoped to everything within Switch-Group */
    --clr-graylight: #cfd8dc;
    --clr-graymed: #90a4ae;
  
    --radius: 6em;     /* Track's and Slider's Corner Radius */
    --trackWidth: 8em; /* clamp(8em, 5vw, 7.75em);   /* Track's Width */
    --trackHeight: 1.75em;  /* Track's Height */
    --btnHeight: 1.0em; /*clamp(0.5em, 3vw, 1.5em);      /* Slider Button Height */
    --btnWidth: 4.0em;    /* Slider Button Width */

    --animation-curve: cubic-bezier(0.34, 1.36, 0.2, 1);

    /* Style of the Group */
    width: var(--trackWidth);
    min-width: fit-content;
    height: var(--trackHeight);
    border-radius: var(--radius);

    box-shadow: 5px 5px 15px 5px lightgray;
    position: relative;
    margin: 1em 0;

    background: lightyellow;
    border: 0.2em solid black;
    font-size: clamp(1rem, 4vw, 1.5rem);
}



/* Slider Button */
#message-switch{
    
    position: absolute;
    top: .18em;
    left: 0.25em;   /* Distance from the Left Edge of the Track, Slider Background */
    
    /* Button's Dimensions and Shape */
    width: var(--btnWidth); 
    height: var(--btnHeight);
    border-radius: var(--radius);;

    background: plum;
    box-shadow: 2px 2px 10px 2px indigo;
    
    font-size: 1.5rem;
    cursor: pointer;
    
}

/* Text for "Prevent" */
#message-switch::before{

    content: "Prevent";
    font-weight: bolder;
    text-align: center;
    
    position: absolute;
    top: -.125em;
    left: 0.3em;    /* Distance of the Word from the Right Edge of the Slider Button */
    

}

/* Text for "Allow" */
#message-switch::after{
    
    position: absolute;
    top: -0.1255em;
    left: 0.80em;  /* Distance of the Word from the Right Edge of the Slider Button */

    content: "Allow";

    /* font-size: 1.5em; */
    font-weight: bolder;
    
    /* top: 1.65em; */
    
    opacity: 0;
} 

#message-checkbox:checked ~ #message-switch::before{
    opacity: 0;
}

#message-checkbox:checked ~ #message-switch::after{
    opacity: 1;
}

#message-checkbox:checked ~ #message-switch{
    /* transform: rotateZ(360deg); */
    /* transform: translate(12em) rotateZ(360deg); */
    transform: translate(3.25em);   /* Distance the Slider Button Moves to the Right Side */
    background-color: yellowgreen;
    box-shadow: 2px 2px 10px 2px green;

}

#message-checkbox:checked ~ #message-switch, 
#message-checkbox:not(:checked) ~ #message-switch{
    transition: 1s var(--animation-curve);
}

#message-checkbox{
    visibility: hidden;
}

@media (max-width: 600px) {
  /* hide long pseudo labels to save space; knob still shows movement */
    #message-switch::before,
    #message-switch::after {
        content: "";
        font-size: 0;
        opacity: 0 !important;
    }
    
    .switch-group {
        max-width: 450px;
        --width: 6.5em;
        width: var(--width);
    }

    #message-switch {
        width: 2em;
        height: 0.8em;
        top: 0.02em;
        transform-origin: left center;
        
        background-color: red;
        box-shadow: 2px 2px 10px 2px maroon;

    }

    #message-checkbox:checked ~ #message-switch{
        /* transform: rotateZ(360deg); */
        /* transform: translate(12em) rotateZ(360deg); */
        transform: translate(1.55em);   /* Distance the Slider Button Moves to the Right Side */
        background-color: yellowgreen;
        box-shadow: 2px 2px 10px 2px green;

    }

    .caption-directions {
        font-size: 1.5rem;
        font-weight: 800;
        color: #111;
    }
}



/* Temprorary */

/* temporary debug — remove after verifying */
/* #guide-notifications-option { outline: 2px dashed rgba(255,0,0,0.75); } */

/* make caption readable on dialog backgrounds */
/* .caption-directions { color: #222 !important; } */

/* fix the pseudo-element positioning (units required) */
/* #message-switch::before { top: -0.5em; left: 0.4em; } */
/* #message-switch::after  { top: -0.5em; left: 0.85em; } */

/* hide native checkbox off-screen but keep it tabbable/accessible */
/* #message-checkbox { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } */